<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--导入合并压缩好的css和js-->
		<link rel="stylesheet" type="text/css" href="min-css/main.min.css"/>
		<script src="min-js/main.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="iconfont">
		<!--头部------------------------------>
		<header>
			<!--地区选择-->
			<div class="left">
				<a href="http://i.meituan.com/index/changecity?cevent=imt%2Fhd%2FcityBottom">
					<span>深圳<i>&#xe60a;</i></span>
				</a>
			</div>
			<!--搜索框-->
			<div class="search">
				<a href="http://i.meituan.com/s/shenzhen?cevent=imt%2Fhomepage%2Fsearch">
					<span><i>&#xe60b;</i>输入商家/品类/商圈</span>
				</a>
			</div>
			<!--用户中心-->
			<div class="right">
				<a href="https://i.meituan.com/account/login?backurl=http%3A%2F%2Fi.meituan.com%2Faccount%2F%3Fcevent%3Dimt%252Fhomepage%252Fmine">
					<i>&#xe60c;</i>
					<p>我的</p>
				</a>
			</div>
		</header>
		
		<!--商品分类--------------------------------->
		<nav class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide first">
					<li><a href="http://i.meituan.com/shenzhen?cid=1&stid_b=1&cateType=poi"><i>&#xe604;</i><p>美食</p></a></li>
					<li><a href="http://i.meituan.com/shenzhen?cid=99&stid_b=1&cateType=poi"><i>&#xe602;</i><p>电影</p></a></li>
					<li><a href="http://i.meituan.com/awp/h5/hotel/search/search.html?stid_b=1&cevent=imt%2Fhomepage%2Fcategory1%2F20"><i>&#xe60d;</i><p>酒店</p></a></li>
					<li><a href="http://i.meituan.com/shenzhen?cid=2&stid_b=1&cateType=poi"><i>&#xe603;</i><p>娱乐</p></a></li>
					<li><a href="http://i.waimai.meituan.com/mti/city"><i>&#xe609;</i><p>外卖</p></a></li>
					
					<li><a href="http://i.meituan.com/ktv/shenzhen?cid=10&cateType=poi&stid_b=1"><i>&#xe606;</i><p>KTV</p></a></li>
					<li><a href="http://i.meituan.com/trip/lvyou/triplist/poi/?stid_b=1&cevent=imt%2Fhomepage%2Fcategory1%2F195"><i>&#xe605;</i><p>周边游</p></a></li>
					<li><a href="http://i.meituan.com/catehome/22?cevent=imt%2Fhomepage%2Fcategory1%2F22"><i>&#xe601;</i><p>丽人</p></a></li>
					<li><a href="http://i.meituan.com/shenzhen?cid=36&cateType=poi&stid_b=1&cevent=imt%2Fhomepage%2Fcategory1%2F36"><i>&#xe607;</i><p>小吃</p></a></li>
					<li><a href="http://i.meituan.com/trip/train/search/?train_source=meituan@wap&cevent=imt%2Fhomepage%2Fcategory1%2F20066"><i>&#xe608;</i><p>机票/火车票</p></a></li>
				</div>
				<div class="swiper-slide second">
					<li><a href="http://i.meituan.com/catehome/3?cevent=imt%2Fhomepage%2Fcategory2%2F3"><i>&#xe613;</i><p>生活服务</p></a></li>
					<li><a href="http://i.meituan.com/shenzhen?cid=0&stid_b=1&cateType=deal"><i>&#xe614;</i><p>今日新单</p></a></li>
					<li><a href="http://i.meituan.com/shenzhen?cid=78&cateType=deal&stid_b=1&cevent=imt%2Fhomepage%2Fcategory2%2F78"><i>&#xe615;</i><p>旅游</p></a></li>
					<li><a href="http://i.meituan.com/shenzhen?cid=52&stid_b=1&cateType=poi"><i>&#xe618;</i><p>足疗按摩</p></a></li>
					<li><a href="http://i.meituan.com/shenzhen?cid=11&stid_b=1&cateType=poi"><i>&#xe610;</i><p>甜点饮品</p></a></li>
					
					<li><a href="http://i.meituan.com/shenzhen?cid=396&stid_b=1&cateType=poi"><i>&#xe617;</i><p>婚纱摄影</p></a></li>
					<li><a href="http://i.meituan.com/catehome/20007?cevent=imt%2Fhomepage%2Fcategory2%2F20007"><i>&#xe611;</i><p>母婴亲子</p></a></li>
					<li><a href="http://i.meituan.com/shenzhen?cid=20285&stid_b=1&cateType=poi"><i>&#xe612;</i><p>学习培训</p></a></li>
					<li><a href="http://i.meituan.com/shenzhen?cid=20178&stid_b=1&cateType=poi"><i>&#xe617;</i><p>结婚</p></a></li>
					<li><a href="http://i.meituan.com/category?city=shenzhen"><i>&#xe619;</i><p>全部分类</p></a></li>
				</div>
			</div>
			<div class="swiper-pagination"></div>
			<!--小圆点分页-->
			<!--<ul class="num"><li class="active"></li><li></li></ul>-->
		</nav>
		
		<!--推荐部分------------------------------->
		<section class="recommend">
			<div class="aside">
				<a href="#">
					<h3>我们约吧</h3>
					<p>恋人家人好朋友</p>
					<img src="img/1.png"/>
				</a>
			</div>
			<div class="main">
				<div class="top"><a href="#">
					<s></s>
					<span class="con">
						
							<b>低价超值</b>
							<u>十元惠生活</u>
						
					</span>
					<span class="img"><img src="img/2.jpg"/></span>
				</a></div>
				<div class="bottom">
					<a href="#" class="left">
						<h3>午后时光</h3>
						<p>懒懒下午茶</p>
						<img src="img/3.png"/>
					</a>
					<a href="#" class="right">
						<h3>名店抢购</h3>
						<p>距离结束</p>
						<span class="time-bar">
							<span class="hour">00</span>:
							<span class="min">00</span>:
							<span class="sec">00</span>
						</span>
					</a>
				</div>
			</div>
		</section>
		
		<!--猜你喜欢---------------------------->
		<section class="love">
			<h2>猜你喜欢</h2>
			<!--<ul class="list"></ul>-->
			<div class="loading"><img src="img/loading.gif"/></div>
			<div class="seeAll">
				<a href="http://i.meituan.com/shenzhen?stid_b=4">
					<span>查看全部团购</span><i>&gt;</i>
				</a>
			</div>
		</section>
		
		<!--回到顶部-->
		<section class="toTop">
			<a href="#">&#xe60e;</a>
		</section>
		
		<!--底部---------------------------------->
		<footer>
			<!--用户登录注册-->
			<section class="user">
				<div class="main">
					<a href="https://i.meituan.com/account/login">登录</a>
					<a href="http://i.meituan.com/account/signup">注册</a>
				</div>
				<div class="city">
					<span>城市：</span>
					<a href="http://i.meituan.com/index/changecity/?cevent=imt%2Fft%2FchangeCity">深圳</a>
				</div>
			</section>
			<!--导航部分-->
			<section class="nav">
				<ul class="list">
					<li><a href="#">首页</a></li>
					<li><a href="https://i.meituan.com/account/login">订单</a></li>
					<li><a href="https://i.meituan.com/account/login">美团下载</a></li>
					<li><a href="http://sz.meituan.com/?pcstyle=1&cevent=imt%2Fft%2Fpc">电脑版</a></li>
					<li><a href="http://i.meituan.com/help/?cevent=imt%2Fft%2Fhelp">帮助</a></li>
				</ul>
			</section>
			<!--友情链接-->
			<section class="link">
				<span>友情链接：<a href="#">猫眼电影</a></span>
			</section>
			<!--版权所有-->
			<section class="copyright">
				<s></s>
				<span>&copy;2016美团网<a href="#">京ICP证070791号</a></span>
			</section>
		</footer>
	</body>
	<script type="text/javascript">
		//商品分类，swiper滑动
		var mySwiper = new Swiper ('.swiper-container', {loop: true,pagination: '.swiper-pagination',});
		
		//我们约吧,设置倒计时
		//参数分别为，小时、分钟、秒数,只能是时间范围的数字
		daojishi(0,3,0);
		var timer=null;
		function daojishi(hour,min,sec){
			var h=parseInt(hour);
			var m=parseInt(min);
			var s=parseInt(sec);
			timer=setInterval(function(){
				//如果倒计时走完，则全部归零
				if (h==0&&m==0&&s==0) {
					$("section.recommend .time-bar").find(".sec").text("00");
					$("section.recommend .time-bar").find(".min").text("00");
					$("section.recommend .time-bar").find(".hour").text("00");
					clearInterval(timer);
					return;
				}
				//判断秒数是否为0
				if (s == 0) {
					s=59;
					m--;
					//判断分钟是否为0
					if (m < 0) {
						m=59;
						h--;
					}
				}else {
					s--;
				}
				//显示两位数字，不够10，则添加0
				if (s.toString().length==1) {
					s="0"+s;
				}
				if (m.toString().length==1) {
					m="0"+m;
				}
				if (h.toString().length==1) {
					h="0"+h;
				}
				$("section.recommend .time-bar").find(".sec").text(s);
				$("section.recommend .time-bar").find(".min").text(m);
				$("section.recommend .time-bar").find(".hour").text(h);
			},1000);
		}
		
		//设置页码索引
		var page=0;
		//设置每页的信息数量
		var count=10;
		
		//滚动条事件
		$(window).on("scroll",function(){
			//回到顶部,滚动条到一定位置，会显示隐藏回到顶部。点击会跳到最顶部
			if($(window).scrollTop()>=400){
				$("section.toTop").show();
			}else {
				$("section.toTop").hide();
			}
			//滚动条到达最底部，加载商品相关信息:图片、价格等
			//文档高度、窗口高度、滚动条位置
			var winHei = $(window).height();
			var docHei = $('html').height();
			var scrTop = $(window).scrollTop();
			//滚动条到达底部，滚动条位置>=文档高度-窗口高度
			if (scrTop>=docHei-winHei) {
				//页码加一，翻页
				page++;
				//显示加载的图标
				$(".love .loading").show();
				//由于商品信息过多，这里限制加载10页内容
				if (page>10) {
					//隐藏加载的图标
					$('section.love .loading').hide();
					return;
				}
				//延时执行函数
				setTimeout(function(){
					loveAjax(showLoveImg);
				},1500);
			}
		})
		
		
		//请求加载(猜你喜欢)商品图片，封装成函数
		function loveAjax(callback){
			//开始索引
			var startIndex = page == 1 ? 0:page*count;
			$.ajax({
				type:"get",
				url:"http://diviner.jd.com/diviner?p=610009&uuid=12396477&lid="+startIndex+"&lim="+count+"&cb=tempGuessLikeCallback",
				dataType:"jsonp",
				jsonp:'callback',
				scriptCharset:"gb2312",
				jsonpCallback:"tempGuessLikeCallback",
				success:function(res){
					var data = res.data;
					var mUl = $('<ul class="list list-'+page+'"></ul>');
					$.each(data, function(index) {
						var mLi = $('<li></li>');
						var mA = $('<a href="'+data[index].clk+'"></a>');
						//商品图片部分的div
						//json中的图片地址，现存在data-lazy-img,src先加载load.png
						var mImg = $('<div class="img"><p>免预约</p><img src="img/load.png" data-lazy-img="http://img13.360buyimg.com/n1/s200x200_'+data[index].img+'" /></div>');
						//商品内容部分的div
						var mMain = $('<div class="main"><h3>'+data[index].t+'</h3><p><span class="price"><s>'+data[index].jp+'</s>元<u>新用户九折优惠</u></span><span class="gone">已售<s>'+data[index].c3+'</s></span></p></div>');
						//用a标签包裹div，将a标签添加到li中
						mA.append(mImg);
						mA.append(mMain);
						mLi.append(mA);
						mUl.append(mLi);
					});
					$(".love .loading").before(mUl);
					
					//使用回调函数，json的图片地址全部获取，再进行加载
					if (typeof callback == 'function') {
						setTimeout(function(){
							callback();
						},1500);
					}
				}
			});
		}
		//猜你喜欢，显示加载好的商品图片
		function showLoveImg(){
			$('section.love .list-'+page+' img').each(function(index){
				$(this).attr('src',$(this).attr('data-lazy-img'));
			})
			//隐藏加载的图标
			$('section.love .loading').hide();
		}
	</script>
</html>
